import './index.scss'
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom'
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Breadcrumb, Button, Divider, Form, Input, Select, Table, Space, Modal, message } from 'antd';
import { setTime } from '../../../../utils/setTime'
import request from '../../../../utils/request'
const TimeDiscount = () => {
    //请求
    //初始化限时折扣活动列表数据
    useEffect(() => {
        request.setDiscountData().then((res) => {
            console.log(res.data);
            //时间格式转化
            let data = res.data
            for (let i = 0; i < data.length; i++) {
                data[i].startTime = setTime(data[i].startTime)
                data[i].endTime = setTime(data[i].endTime)
            }
            setData(data)
        })
    }, [])

    //获取数据弹框数据请求
    const setMetadatas = (id) => {
        request.setMetadata({ discountId: id }).then(res => {
            console.log(res);
        })
    }
    //停用请求
    const showConfirm = (id) => {
        confirm({
            title: '停用折扣活动',
            icon: <ExclamationCircleOutlined />,
            content: '确定停用此折扣活动吗？',
            onOk() {
                request.stopData({ discountId: id }).then(res => {
                    console.log(res);
                })
            },

        });
    };

    //分页
    const showTotal = (total) => `数量 ${total} 条`;
    //表格数据
    const [data, setData] = useState([])
    //表头设置
    const columns = [
        {
            key: 'eventName',
            title: '活动名称',
            dataIndex: 'eventName',
            align: 'center'
        },
        {
            key: 'price',
            title: '原价 (元)',
            dataIndex: 'price',
            align: 'center'
        },
        {
            key: 'discountPrice',
            title: '折扣价 (元)',
            dataIndex: 'discountPrice',
            align: 'center'
        },
        {
            key: 'totalInventory',
            title: '库存',
            dataIndex: 'totalInventory',
            align: 'center'
        },
        {
            key: 'activeStatus',
            title: '活动状态',
            dataIndex: 'activeStatus',
            align: 'center',
            render: (_, record) => (
                <span></span>
            )
        },
        {
            key: 'endTime',
            title: '有效期',
            align: 'center',
            render: (_, record) => (
                <span>{record.startTime + '-' + record.endTime}</span>

            )
        },
        {
            key: 'operation',
            title: '操作',
            dataIndex: 'operation',
            align: 'center',
            render: (_, record) => (
                <Space size="middle">
                    <Button type="link" onClick={() => {
                        navigate('/home/market/time-discount/discountEdit', { state: { editDatas: record } })
                    }}>编辑</Button>
                    <Button type="link" onClick={() => {
                        dataModal(true);
                        setMetadatas(record.discountId)
                    }}>数据</Button>
                    <Button type="link">复制 </Button>
                    <Button type="link" onClick={() => { showConfirm(record.discountId) }}>停用 </Button>
                </Space>
            )
        },
    ];
    //创建搜索from
    const [searchForm] = Form.useForm()
    //跳转
    const navigate = useNavigate()
    //查询确定
    const onFinish = (values) => {
        //获取输入值
        let searchS = searchForm.getFieldsValue()
        if (searchS.username == undefined && searchS.state == undefined) {
            setIsShow('block')
        } else {
            setIsShow('none')
        }
        if (searchS.username || searchS.state) {
            if (searchS.username && searchS.state) {
                request.setDiscountData(searchS).then(res => {
                    console.log(res);
                })
            } else if (searchS.username) {
                request.setDiscountData(searchS.username).then(res => {
                    console.log(res);
                })
            } else {
                request.setDiscountData(searchS.state).then(res => {
                    console.log(res);
                })
            }

        }


    };

    //表格内容获取
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(selectedRows);
        },

    };
    //择框
    const [selectionType] = useState('checkbox');
    //数据对话框
    const [dataVisible, setdataVisible] = useState(false);
    const dataModal = () => {
        setdataVisible(true);
    };
    //停用对话框
    const { confirm } = Modal;

    //input提示
    const [isShow, setIsShow] = useState('none')
    return <div className="divBox">
        <div className='heiders'>
            <div>
                <Breadcrumb>
                    <Breadcrumb.Item>营销</Breadcrumb.Item>
                    <Breadcrumb.Item>限时折扣</Breadcrumb.Item>
                    <Breadcrumb.Item>限时折扣活动</Breadcrumb.Item>
                </Breadcrumb>
            </div>
            <h2>限时折扣</h2>
        </div>
        <Divider
            style={{ margin: '0 0', border: '1px solid  #e9e9e9' }}
        />
        <Form

            form={searchForm}
            layout='inline'
            className='formTop'
            colon={false}
            labelCol={{ span: 8, }}
            wrapperCol={{ span: 16, }}
            onFinish={onFinish}
            autoComplete="off"
        >
            <Form.Item label="名称" name="username" >
                <Input style={{ width: '400px' }} placeholder='请输入' name='getName' />
            </Form.Item>
            <div style={{ position: 'absolute', top: 56, left: 38, color: 'red', display: isShow }}>请输入查询名称</div>
            <Form.Item label="状态" name="state">
                <Select style={{ width: '400px' }} placeholder='请选择使用状态'>
                    <Select.Option >全部</Select.Option>
                    <Select.Option value='0'>未开始</Select.Option>
                    <Select.Option value='1'>进行中</Select.Option>
                    <Select.Option value='2'>已结束</Select.Option>
                </Select>
            </Form.Item>
            <div className='itemRight'>
                <Form.Item wrapperCol={{ offset: 2, span: 16, }} className='btnItem'>
                    <Button type="primary" htmlType="submit"> 查询</Button>
                </Form.Item>
                <Form.Item >
                    <Button onClick={() => { setData(data) }} >重置</Button>
                </Form.Item>
            </div>

        </Form>
        <div className='divContent'>
            <div className='ContentTop'>
                <h3>限时折扣活动列表</h3>
                <div>
                    <Button type="primary" onClick={() => {
                        navigate('/home/market/time-discount/discountAdd')
                    }}> +新建</Button>
                    <Button onClick={() => {

                    }}> 批量操作</Button>
                </div>
            </div>
            <div className='TableClass'>
                <Table
                    rowSelection={{ type: selectionType, ...rowSelection }}
                    rowKey={(record) => record.discountId}
                    columns={columns}
                    dataSource={data}
                    pagination={{
                        total: data.length,
                        showTotal: showTotal,
                        showSizeChanger: true,
                        showQuickJumper: true,
                    }}
                />
                <Modal title="Basic Modal" visible={dataVisible} onCancel={() => { setdataVisible(false) }} footer=''>
                    <div className='bounced'>
                        <div>
                            <span>订单金额 (元)</span>
                            <h2>8000</h2>
                        </div>
                        <div>
                            <span>订单数 (元)</span>
                            <h2>8000</h2>
                        </div>
                        <div>
                            <span>付款人数 (元)</span>
                            <h2>8000</h2>
                        </div>
                        <div>
                            <span>优惠金额（元）</span>
                            <h2>8000</h2>
                        </div>
                    </div>
                    <Button type='primary' onClick={() => { setdataVisible(false) }}>关闭</Button>
                </Modal>
            </div>
        </div>
    </div >
}
export default TimeDiscount;